<h1 class="ui header">Sequential Dependencies</h1>
<div class="ui grid">
    <div class="thirteen wide column">
        <div class="ui one column centered grid" >
            <h4 class="ui column center aligned">Data Display</h4>
            <div class="column" ng-show="!showChart">
                <dat-table data="inputDataTable"></dat-table>
            </div>
            <div class="column"   ng-show="showChart">
                <fan-data-problem-chart class="ui one column centered grid" style="width:100%; height:400px;"></fan-data-problem-chart>
            </div>
        </div>
    </div>

    <div class="three wide column">
        <div class="ui one column centered grid">
            <h4 class="ui column center aligned">Settings</h4>
            <div class="ui form">
                <div class="field" ng-show="detectionProcess">
                    <label>Input File</label>
                    <input type="text" ng-model="inputPath" placeholder="/path/file.csv">
                    <a type="file" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="30MB"
                       class="fluid mini ui bottom attached button center aligned">Select Data File</a>
                </div>

                <div class="field" ng-show="detectionProcess">
                    <label>Detection Result File</label>
                    <input type="text" ng-model="outputDetectionPath" placeholder="/path/file.csv">
                </div>

                <div class="field" ng-show="detectionProcess">
                    <label>Select Attribute</label>
                    <select ng-model="usedAttr" select-search>
                        <option ng-repeat="attr in autoCompleteAttrs" ng-if="attr != '_ts'" value="{{attr}}">{{attr}}</option>
                    </select>
                </div>

                <div class="field" ng-show="detectionProcess">
                    <label>Difference Between Adjacent Data</label>
                    <input type="text" ng-model="detectionLeftBound" placeholder="0" style="width: 45%;" title="Minimal Constraint">
                    <input type="text" ng-model="detectionRightBound" placeholder="0.1" style="width: 45%;float:right" title="Maximal Constraint">
                </div>

                <div class="field" ng-show="detectionProcess">
                    <label>Confidence</label>
                    <input type="text" ng-model="detectionConfidence" placeholder="0.9" title="Minimal interval accuracy">
                </div>

                <div class="field" ng-show="detectionProcess">
                    <label>Support</label>
                    <input type="text" ng-model="detectionSupport" placeholder="5" title="Minimal interval length">
                </div>

                <div class="field" ng-show="detectionProcess" >
                    <button class="fluid ui button primary" ng-click="detection()">Detect</button>
                    <button id="goToRepair" class="fluid ui button primary" ng-click="goToRepair()" disabled="disabled" style="margin-top: 5px;">Go To Repair</button>
                </div>

                <div class="field" ng-show="!detectionProcess">
                    <button class="fluid ui button primary" ng-click="backToDetection()" >Back To Detection</button>
                </div>

                <div class="field" ng-show="!detectionProcess">
                    <label>Repair Result File</label>
                    <input type="text" ng-model="outputRepairPath" placeholder="/path/file.csv">
                </div>

                <div class="field" ng-show="!detectionProcess">
                    <label>Select Repair Method</label>
                    <select ng-model="repairAlgorithm" select-search>
                        <option ng-repeat="algorithm in repairAlgorithmList" value="{{algorithm.url}}">{{algorithm.name}}</option>
                    </select>
                </div>

                <div class="field" ng-show="!detectionProcess">
                    <label id="repairAlgorithmAttrLabel"></label>
                    <input type="text" ng-model="repairAlgorithmAttr" placeholder="10" ng-show="showRepairAlgorithmAttr">
                </div>

                <button class="fluid ui button primary" ng-click="repair()" ng-show="!detectionProcess">Repair</button>


            </div>
        </div>
    </div>
</div>
